<template>
  <view class="address-list-container">
    <e-navbar leftTitle="地址列表"></e-navbar>
    <u-gap height="15"></u-gap>
    <template v-if="addressList.length === 0">
      <u-gap height="150"></u-gap>
      <u-empty icon="http://cdn.uviewui.com/uview/empty/address.png" text="暂无收货地址"></u-empty>
    </template>
    <template v-else>
      <view class="main-card address-item" v-for="(item,index) in addressList" :key="index">
        <view class="flex col-bottom">
          <text class="font-28 text-333 m-r-14 pingfang-heavy">彭女士</text>
          <text class="font-26 text-999">13213895462</text>
        </view>
        <view class="m-t-20 p-b-30">
          <view class="font-24 hidden_two">河南省郑州市金水区兰阳路留在街道</view>
        </view>
        <view class="address-item_bottom flex col-center row-between">
          <view class="flex col-center" @click="handleChangeDefault(item,index)">
            <image v-if="item.is_default" class="check-icon" :src="$image('/images/check-icon.png')" mode="aspectFill"></image>
            <view v-else class="not-check"></view>
            <view class="m-l-10">默认地址</view>
          </view>
          <view class="flex col-center">
            <view class="address-icon" @click="handleCreateOrEditAddress('edit',item.id)">
              <image :src="$image('/images/edit-icon.png')" mode="aspectFill"></image>
              <view>编辑</view>
            </view>
            <view class="address-icon" @click="handleShowDeletePopup(item,index)">
              <image :src="$image('/images/delete-icon.png')" mode="aspectFill"></image>
              <view>删除</view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore status="nomore" color="#999"/>
      <u-gap height="100"></u-gap>
    </template>
    <view class="adderss-bottom">
      <u-button text="新增地址" color="#1F66FF" @click="handleCreateOrEditAddress('create')"></u-button>
    </view>
    <e-popup ref="deletePopup" @close="handleClosePopup" @confirm="handleConfirmPopup"></e-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [],
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList(){
      for(let i = 0;i < 10;i++){
        this.addressList.push({
          id: i + 1,
          name: "彭女士",
          phone: "13213895462",
          address: "河南省郑州市金水区兰阳路留在街道",
          is_default: i == 0 ? true : false,
        })
      }
    },
    // 点击切换默认地址
    handleChangeDefault(item,index){
      if(item.is_default) return;
      this.addressList[index].is_default = true;
      this.addressList.map((val,idx)=>{
        if(index != idx) this.addressList[idx].is_default = false;
      })
    },
    handleCreateOrEditAddress(type = 'create', id = ""){
      let url = "/pages/mine/createOrEditAddress/createOrEditAddress"
      switch (type){
        case 'create':
          url = url + "?title=新增地址"
          break;
        case 'edit':
          url = url + "?title=编辑地址" + "&id=" + id
          break;
      }
      uni.navigateTo({url});
    },
    // 显示删除弹窗
    handleShowDeletePopup(item,index){
      this.$refs.deletePopup.handleShowPopup("是否删除此收货地址?");
    },
    handleClosePopup(){
      this.$refs.deletePopup.handleClosePopup();
    },
    handleConfirmPopup(){
      this.handleClosePopup();
      this.$u.toast("删除成功");
    }
  }
}
</script>

<style lang="scss" scoped>
  .address-list-container{
    .address-item{
      padding: 30rpx;
      margin-bottom: 20rpx;
      &_bottom{
        border-top: 1px solid #EEEEEE;
        padding-top: 20rpx;
        font-size: 22rpx;
        color: #999;
        .not-check{
          width: 28rpx;
          height: 28rpx;
          border: 1px solid #999999;
          border-radius: 50%;
        }
        .check-icon{
          width: 28rpx;
          height: 28rpx;
          display: block;
        }
        .address-icon{
          display: flex;
          align-items: center;
          margin-left: 38rpx;
          image{
            width: 32rpx;
            height: 32rpx;
            display: block;
            margin-right: 8rpx;
          }
        }
      }
    }
    .adderss-bottom{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 30rpx 30rpx 52rpx;
      background-color: #fff;
    }
  }
</style>
